<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="hatswitch"
        >
          <el-tab-pane label="直属用户" class="hatswitch1" name="first">
            <First></First>
          </el-tab-pane>
          <el-tab-pane label="分销代理" name="second" v-if="this.$store.state.user.power == 1">
            <Second></Second>
          </el-tab-pane>
          <el-tab-pane label="下级用户" name="third" v-if="this.$store.state.user.power == 1">
            <Third></Third>
            </el-tab-pane
          >
          <el-tab-pane label="静默用户" name="fourth">
            <Fourth></Fourth>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!-- {{user}} -->
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  props: {
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  computed: {
    ...mapState(["user"]),
  }
  ,
  created() {
    console.log(this.$store.state.user)
  },
  mounted() {},
  watch: {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {
    First:()=>import('./pages/First'),
    Second:()=>import('./pages/Second'),
    Third:()=>import('./pages/Third'),
    Fourth:()=>import('./pages/Fourth')
  },
};
</script>

<style scoped lang="stylus">
@import '/domesticconsumer.styl'
</style>
